<template>
  <div
    class="wrapper"
    :class="[
      status == 1 ? 'wrapper-danger' : status >= 2 ? 'wrapper-primary' : '',
    ]"
  >
    <div class="item-title">{{ acid }}</div>
    <div class="item-between">
      <span>{{ dep }}</span>
      <el-icon><Right /></el-icon>
      <span>{{ arr }}</span>
    </div>
    <div class="item-between">
      <span>{{ gate }}</span>
      <el-icon><DArrowRight /></el-icon>
      <span>{{ gate2 }}</span>
    </div>
    <div class="item-between">
      <span>ETD&nbsp;</span>
      <span>{{ etd }}</span>
    </div>
    <div class="item-between">
      <span>{{ statusMsg }}</span>
      <el-button link>
        <el-icon v-if="status == 0"><QuestionFilled /></el-icon>
        <el-icon v-if="status == 1"><CircleCloseFilled /></el-icon>
        <el-icon v-if="status >= 2"><SuccessFilled /></el-icon>
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import dayjs from "dayjs";
const props = defineProps({
  cellData: {
    type: Object,
    required: true,
  },
});
const acid = computed(() => props.cellData.acid);
const dep = computed(() => props.cellData.dep);
const arr = computed(() => props.cellData.arr);
const etd = computed(() =>
  dayjs(props.cellData.etd).format(
    dayjs().isSame(props.cellData.etd, "day") ? "HH:mm" : "MM/DD HH:mm"
  )
);
const gate = computed(() => props.cellData.route.split(" ")[0]);
const gate2 = computed(() => props.cellData.route2.split(" ")[0]);
const status = computed(() => props.cellData.status);
const statusMsg = computed(() =>
  props.cellData.status == 2
    ? "已批复"
    : props.cellData.status == 2
    ? "已批复但未发报"
    : "未批复"
);
</script>

<style scoped>
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 160px;
  /* min-width: 120px; */
  /* max-width: 160px; */
  margin: 12px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--el-color-info);
  color: var(--el-text-color-secondary);
  background-color: var(--el-color-info-light-8);
  font-size: 14px;
  line-height: 1.75em;
  /* width: 100%; */
  /* height: 100%; */
}
.wrapper-primary {
  background-color: var(--el-color-primary-light-8);
}
.wrapper-error {
  background-color: var(--el-color-error-light-8);
}
.item-title {
  font-size: 1.5em;
  padding-bottom: 8px;
}
.item-between {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.item-center {
  /* width: 100%; */
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
